<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 600rpx;width: 100%;">
			<swiper-item v-for="(item,index) in shopDetailData.imgs">
				<image :src="image+item" mode="" style="height: 600rpx;width: 100%;" class="bg-gray"></image>
			</swiper-item>
		</swiper>
		<view class="bg-white padding">
			<view class="text-bold">{{shopDetailData.title}}</view>
			<view class="rowsb margin-top-sm">
				<view class="text-red">￥{{shopDetailData.price}}
					<text class="text-gray margin-left-sm text-sm" style="text-decoration:line-through">
						￥{{shopDetailData.old_price}}
					</text>
				</view>
				<view class="text-gray">
					已售:{{shopDetailData.sale_num}}
				</view>
			</view>
		</view>
		<view class="padding bg-white margin-top-sm flex align-center rowsb solid-bottom">
			<view class="flex">
				<view class="text-gray">规格</view>
				<view class="text-bold margin-left-xl">默认</view>
			</view>
			<view class="cuIcon-right"></view>
		</view>
		<view class="padding bg-white align-center rowsb">
			<view class="align-center">
				<view class="text-gray ">
					优惠
				</view>
				<view class="flex text-sm margin-left-xl">
					<view class="text-gray">
						优惠券数
					</view>
				</view>
			</view>
			<view class="cuIcon-right"></view>
		</view>
		<view class="text-center padding">
			商品简介
		</view>
		<view style="width: 750rpx;">
			<view style="max-width: 750rpx;" v-html="contentText"></view>
		</view>
		<view class="bg-white flex rowsb" style="position: fixed;z-index: 1;bottom: 0;right: 0;left: 0;height: 100rpx;">
			<view class="align-center">
				<view class="rowsc text-center  flex" @click="shopping" style="width: 150rpx;">
					<view @click="$tools.Router('/pages/cart/cart')">
						<view>
							<image src="../../static/user/icon_xqgouwuc.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<view class="text-sm">
							购物车
						</view>
					</view>
					<view class="bg-red text-white round rowsc align-center" style="height: 40rpx;width: 40rpx;"v-if="cartList !=''">
						{{cartList.length}}
					</view>
				</view>
			<!-- 	<view class="text-center" style="width: 150rpx;">
					<view>
						<image src="../../static/user/icon_shoucang.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view class="text-sm">
						收藏
					</view>
				</view> -->
			</view>
			<view class="align-center" style="height: 100%;">
				<view class=" text-center rowsc align-center text-white" style="background-color: #F37B1D;height: 100%;width: 200rpx;"
				 @click="warpinfo=true">
					加入购物车
				</view>
				<view class=" text-center rowsc align-center text-white text-sm " style="background-color: #E54D42;height: 100%;width: 200rpx;"
				 @click="warpinfo=true">
					立即购买
				</view>
			</view>
		</view>










		<view class="warp" v-if="warpinfo" style="z-index: 1;">
			<view class="specification-bg">
				<view class="text-red justify-end padding-top-xs" @click="warpinfo=false">
					<image src="../../static/icon-close.png" mode="" style="height: 50rpx;width: 50rpx;" class="margin-right margin-top"></image>
				</view>
				<view class=" rows solid-bottom padding-bottom-sm padding">
					<view>
						<image :src="image+shopDetailData.img" mode="" style="width: 200rpx;height: 200rpx;background: #EEEEEE;" class="radius"></image>
					</view>
					<view class="margin-left-sm ">
						<view class="towlineshow">
							{{shopDetailData.title}}
						</view>
						<view class="text-red margin-top-xl text-bold">
							{{'￥' +price || '未选择'}}
						</view>
					</view>
				</view>
				<view v-for="(item,index) in shopDetailData.spec.spec">
					<view class="text-bold margin-tb padding-lr">{{item.title}}</view>
					<view class="rows solid-bottom padding-bottom-sm padding-left flex flex-wrap">
						<view class="margin-right radius text-black align-center margin-top" style=" background-color: #eeeeee;padding: 10rpx;"
						 :class="[items.show?'specificationsText':'']" v-for="(items,indea) in item.value" @click="specificationsMen(index,indea,items)">
							{{items.value}}
						</view>
					</view>
				</view>
				<view class="rowsb align-center solid-bottom  padding-lr">
					<view class="padding-tb ">
						购买数量:
					</view>
					<view class="align-center">
						<view @click="quantitysub" class=" border bg-gray rowsc align-center" style="width: 30rpx;height: 30rpx;">
							-
						</view>
						<view class="padding-lr">
							{{quantity}}
						</view>
						<view @click="quantityadd" class=" border bg-gray rowsc align-center" style="width: 30rpx;height: 30rpx;">
							+
						</view>
					</view>
				</view>
				<view class="padding text-white rowsa">
					<view class="padding-sm radius text-center" style="background-color: #38436F;width: 200rpx; " @click="addmychat">
						加入购物车
					</view>
					<view style="background-color: #E51C1E;width: 200rpx;" class="padding-sm radius text-center" @click="addOrder">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		getGoodDetail,
		addmychat,
		getMyChatList
	} from '../../common/path.js'
	export default {
		data() {
			return {
				contentText: "",
				shopDetailData: [], //商品详情
				cartList: [], //购物车数量
				nodes: '',
				quantity: 1,
				warpinfo: false,
				num: 0,
				detailId: '',
				price: '', //选中的价格
				shopData: [],
				selectGui: '',
				image: ''
			}
		},
		onLoad(option) {
			this.detailId = option.id
			this.image = app.image
			this.getGoodDetail()
			this.getMyChatList()
		},
		methods: {
			//获取购物车数量接口
			getMyChatList() {
				let data = {
					id: app.userInfo.id
				}
				this.$axios.axios('POST', getMyChatList, data)
					.then(res => {
						if (res.status == 1) {
							this.cartList = res.data
						} else {
							this.$tools.showToast('异常')
						}
					})
					.catch(err => {
						console.log(err)
					})

			},
			//加入购物车
			addmychat() {
				if (this.selectGui) {
					let data = {
						id: app.userInfo.id + "",
						goods_id: this.detailId + "",
						num: this.quantity + "",
						spec: this.selectGui
					}
					this.$axios.axios('POST', 'http://sc25.chuchuliuxin.top/api/cart/addmychat', data)
						.then(res => {
							console.log(res)
							if (res.status) {
								this.getMyChatList()
								this.$tools.showToast('加入购物车成功！')
							} else {
								this.$tools.showToast('失败！')
							}
						})
						.catch(err => {
							console.log(err)
							this.$tools.showToast('失败', err)
						})
				} else {
					this.$tools.showToast('请先选择规格')
				}
			},
			//跳转到下单
			addOrder() {
				if (this.selectGui) {
					let data = {
						user_id: app.userInfo.id,
						cart_ids: '',
						goods_id: this.detailId,
						spec: this.selectGui,
						num: this.quantity,
						title: this.shopDetailData.title,
						price: this.shopDetailData.price,
						image: this.shopDetailData.img

					}
					uni.navigateTo({
						url: '../cart/addOrder?detail=' + JSON.stringify(data)
					})
				} else {
					this.$tools.showToast('请选择规格')
				}
			},
			//选择类型
			specificationsMen(event, index, items) {
				let listArr = this.shopDetailData;
				listArr.spec.spec[event].show = true; //把大规格变为true
				listArr.spec.spec[event].value.forEach(oneone => { //第一一层的规格
					oneone.show = false;
				})
				listArr.spec.spec[event].value[index].show = true; //把当前选中变为true


				// this.shopData.push(items.value)
				// let setdataarr = Array.from(new Set(this.shopData))
				// console.log('选中的规格>', setdataarr)

				let show = true; //判断有无全选
				for (let i = 0; i < listArr.spec.spec.length; i++) { //判断有无全选
					if (!listArr.spec.spec[i].show) {
						show = false;
						break;
					}
				}
				if (show) { //这是所有规格已经全选了
					let strinText = ''; //判断规格套餐使用
					listArr.spec.spec.forEach(twotwo => {
						for (let n = 0; n < twotwo.value.length; n++) {
							if (twotwo.value[n].show) {
								strinText += n
							}
						}
					})
					let selectGui = listArr.spec.stock[strinText]; //选中的规格套餐
					// console.log(strinText,'这是所有规格已经全选了',selectGui.stock)
					this.price = selectGui.stock; //赋值页面，
					this.selectGui = strinText
					console.log(selectGui)
				}
				this.shopDetailData = listArr;
			},
			//减少 
			quantitysub() {
				if (this.quantity > 1) {
					this.quantity--
				} else {
					this.$tools.showToast('不能低于一件商品')
				}
			},
			//加
			quantityadd() {
				this.quantity++
			},
			//商品详情
			getGoodDetail() {
				let data = {
					id: this.detailId,
					user_id: app.userInfo.id
				}
				this.$axios.axios('POST', getGoodDetail, data)
					.then(res => {
						// console.log('商品规格========>', res.data.spec.spec)
						let listTotal = res.data;
						listTotal.spec.spec.forEach(oneone => {
							oneone.show = false;
							let arr = [];
							oneone.value.forEach(twotwo => {
								let obj = {
									value: twotwo,
									show: false
								}
								arr.push(obj)
							})
							oneone.value = arr
						})
						// console.log('商品详情======>',listTotal.spec.spec)
						this.shopDetailData = listTotal;
						this.contentText = res.data.content.replace(/\<img/gi,
							'<img style="width:100%;height:auto;display:inline-block;margin:10rpx auto;"')

						console.log(this.contentText)
					})
					.catch(err => {
						this.$axios.axios('网络异常！')
					})
			}
		}
	}
</script>

<style>
	.specificationsText {
		background-color: #FF9800 !important;
		padding: 10rpx;
		color: #FFFFFF !important;
	}

	page {
		background-color: #F5F5F5;
	}

	.specification-bg {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
	}
</style>
